<template>
	<a-select  :options="userList" v-model="modelValue" :field-names="fieldNames"  :placeholder="$t('base.placeholderSelect') + $t('base.user')" :virtual-list-props="{ height: 350 }">
		<template #option="{ data }">
			<div class="flex">
               <p> {{ data.nickname }}</p>
				<span class="post ml-10">{{ data?.postNames?.join(",") }}</span>
			</div>
			<p class="dept">{{ data?.deptNames?.join(",") }}</p>
		</template>
	</a-select>
</template>

<script setup lang="ts">
import { simpleList } from "@/api/common";
const userList = ref([]);
const fieldNames = { value: "id", label: "nickname" };
const props = defineProps({
	modelValue: {
		type: Array,
		default: () => []
	}
})
const emit = defineEmits(['update:modelValue'])
const modelValue = computed({
	get() {
		return props.modelValue
	},
	set: (val) => {
		emit('update:modelValue', val)
	}
})
const getList = async () => {
	const data = await simpleList({});
	userList.value = data;
};
onMounted(() => {
	getList();
});
</script>

<style scoped lang="scss">
.post,.dept{
    font-size: 12px;
    color: #999;
    line-height: 2;
}
</style>
